<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <div th:replace="common/commonVant::commonStaticVant"></div>
    <script th:src="@{/common/localStorage.js}"></script>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app" v-cloak>
    <van-form @submit="submitForm" validate-first>
        <van-cell-group>
            <van-field v-model="request.articleTitle" label="文章标题" placeholder="请输入显目的文章标题"
                       :rules="[{ required:true, message: '标题不能为空！' }]"/>
        </van-cell-group>
        <!--        <van-cell-group>-->
        <!--            <van-button type="primary" size="small" @click="bolderFont">粗体</van-button>-->
        <!--            <van-button type="primary" size="small">蓝色</van-button>-->
        <!--            <van-button type="primary" size="small">斜体</van-button>-->
        <!--            <van-button type="primary" size="small">换行</van-button>-->
        <!--            <van-button type="primary" size="small">文件</van-button>-->
        <!--        </van-cell-group>-->
        <van-cell-group>
            <van-field v-model="request.articleContent" rows="10"
                       type="textarea"
                       maxlength="1000" show-word-limit label="文章内容" placeholder="请输入有营养的文章内容"
                       :rules="[{ required:true, message: '文章内容不能为空！'}]"/>
        </van-cell-group>
        <van-cell-group>
            <van-field
                    readonly
                    clickable
                    label="栏目"
                    :value="request.tabContent"
                    placeholder="请选择栏目"
                    @click="showPicker = true"
            />
        </van-cell-group>
        <div style="margin: 16px;">
            <van-button round block type="info" native-type="submit">
                发布文章
            </van-button>
        </div>
    </van-form>
    <van-notify v-model="successShow" type="success">
        <span>{{successMessage}}</span>
    </van-notify>
    <van-notify v-model="failShow" type="danger">
        <span>{{failMessage}}</span>
    </van-notify>
    <van-dialog v-model="loginShow" title="检测到您未登陆" show-cancel-button @confirm="login" cancel-button-text="不需要"
                confirm-button-text="去登陆"></van-dialog>
    <van-popup v-model="showPicker" round position="bottom">
        <van-picker
                show-toolbar
                :columns="tabMenuList"
                @cancel="showPicker = false"
                @confirm="onConfirm"
        />
    </van-popup>
</div>
<script>
    let mvvm = new Vue({
        el: "#app",
        data: {
            loginShow: false,
            showPicker: false,
            tabMenuList: [],
            failShow: false,
            successMessage: '',
            successShow: false,
            failMessage: '',
            value: '',
            request: {
                articleTitle: '',
                articleContent: '',
                tabContent: '',
            },
            token: ''
        },
        methods: {
            bolderFont() {

            },
            inputContent() {

            },
            onConfirm(value) {
                this.request.tabContent = value;
                this.showPicker = false;
            },
            mobileValidator(val) {
                return /^[1][3,5,7,8][0-9]{9}$/.test(val);
            },
            async submitForm(value) {
                const result = await httpPost('/article/pushArticle', this.request, {'Authorization': this.token});
                if (result.code == 200) {
                    this.successMessage = result.message;
                    this.successShow = true;
                    setTimeout(() => {
                        this.successShow = false;
                    }, 2000);
                } else {
                    this.failMessage = result.message;
                    this.failShow = true;
                    setTimeout(() => {
                        this.failShow = false;
                    }, 2000);
                }
            },
            async getTabMenu() {
                const result = await httpPost("/tabMenu/getTabMenu");
                if (result.code == 200) {
                    for (let i of result.data) {
                        this.tabMenuList.push(i.tabContent);
                    }
                } else {

                }
            },
            login() {
                window.location.href = '/home/login'
            }
        },
        mounted() {
            this.getTabMenu();
            this.token = window.getLocalStorage("token");
            this.token = this.token ? this.token : '';
            this.token ? this.loginShow = false : this.loginShow = true;
        }
    })
</script>
<script th:inline="javascript">
</script>
</body>
<style>

</style>
</html>